<template>
  <div class="index">
    <el-container direction="vertical">
      <el-header>
        <div class="header">
          <div class="left">
            <img
              style="width: 110px; height: 50px; margin-right: 14px"
              src="../../assets/ryzLogo/logo-4.png"
              alt=""
            />
            <h3 style="color: #fff">融易装运营总后台</h3>
          </div>
          <div class="header_right">
            <!-- <div class="header_right_left"><i class="el-icon-message-solid"></i></div> -->
            <div class="header_right_right">
              <el-dropdown trigger="click">
                <div style="display: flex; align-items: center">
                  <div
                    style="
                      width: 40px;
                      height: 40px;
                      border-radius: 50%;
                      margin-right: 16px;
                    "
                  >
                    <img
                      src="@/assets/Aatar.png"
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  <span class="el-dropdown-link">
                    {{ userName
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div class="down_login" @click="downLogin">退出登录</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 左边侧边栏 -->
        <el-aside width="210px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#2D3A4B"
            text-color="#fff"
            active-text-color="#fff"
            :unique-opened="true"
            :router="true"
          >
            <el-menu-item index="/manaindex">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <!-- <el-submenu index="3">
					    <template slot="title">
					      <i class="el-icon-setting"></i>
					      <span>基础设置</span>
					    </template>
					    <el-menu-item-group>
					  		<el-menu-item class="el-item" index="/bannerSet">banner图</el-menu-item>
					  		<el-menu-item class="el-item" index="/bannerList">banner列表</el-menu-item>
					  		<el-menu-item class="el-item" index="/bannerTypeList">banner类型</el-menu-item>
					    </el-menu-item-group>
					  </el-submenu>
					  <el-submenu index="4">
					    <template slot="title">
					      <i class="el-icon-user"></i>
					      <span>账号管理</span>
					    </template>
					    <el-menu-item-group>
					  		<el-menu-item class="el-item" index="/businessList">账号列表</el-menu-item>
					    </el-menu-item-group>
					  </el-submenu>
					   <el-submenu index="5">
					    <template slot="title">
					      <i class="el-icon-coordinate"></i>
					      <span>平台审核</span>
					    </template>
					    <el-menu-item-group>
					  		<el-menu-item class="el-item" index="/needExamine">待审核</el-menu-item>
							<el-menu-item class="el-item" index="/passExamine">已通过</el-menu-item>
							<el-menu-item class="el-item" index="/rejectExamine">已驳回</el-menu-item>
					    </el-menu-item-group>
					  </el-submenu>
					    <el-submenu index="6">
					    <template slot="title">
					      <i class="el-icon-s-shop"></i>
					      <span>商家管理</span>
					    </template>
					    <el-menu-item-group>
					  		<el-menu-item class="el-item" index="/partnerList">商家列表</el-menu-item>
					    </el-menu-item-group>
					  	</el-submenu>
					    <el-submenu index="7">
					    <template slot="title">
					      <i class="el-icon-brush"></i>
					      <span>施工队管理</span>
					    </template>
					    <el-menu-item-group>
					  		<el-menu-item class="el-item" index="/constructionList">施工队列表</el-menu-item>
					    </el-menu-item-group>
					  	</el-submenu>
					    <el-submenu index="8">
					    <template slot="title">
					      <i class="el-icon-scissors"></i>
					      <span>设计师管理</span>
					    </template>
					    <el-menu-item-group>
					  		<el-menu-item class="el-item" index="/designerList">设计师列表</el-menu-item>
					    </el-menu-item-group>
					  	</el-submenu>
					    <el-submenu index="9">
					    <template slot="title">
					      <i class="el-icon-office-building"></i>
					      <span>装饰公司管理</span>
					    </template>
					    <el-menu-item-group>
					  		<el-menu-item class="el-item" index="/decorationList">装饰公司列表</el-menu-item>
					    </el-menu-item-group>
					  	</el-submenu>
						<el-submenu index="10">
							<template slot="title">
							<i class="el-icon-star-off"></i>
							<span>分类管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/classList">家居</el-menu-item>
								<el-menu-item class="el-item" index="/extClassList">泛家居</el-menu-item>
								<el-menu-item class="el-item" index="/appCateList">APP首页分类</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
					 <el-submenu index="27">
						 <template slot="title">
							 <i class="el-icon-goods"></i>
							 <span>品牌管理</span>
						 </template>
						 <el-menu-item-group>
							 <el-menu-item class="el-item" index="/brandList">品牌列表</el-menu-item>
						 </el-menu-item-group>
					 </el-submenu>
						  <el-submenu index="11">
							<template slot="title">
							<i class="el-icon-goods"></i>
							<span>商品管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/shopList">商品列表</el-menu-item>
								<el-menu-item class="el-item" index="/productHot">爆款/优选</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
						  <el-submenu index="12">
							<template slot="title">
							<i class="el-icon-s-flag"></i>
							<span>产品库</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/productLibraryList">商品列表</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
						  <el-submenu index="13">
							<template slot="title">
							<i class="el-icon-key"></i>
							<span>权限管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/nodeList">节点管理</el-menu-item>
								<el-menu-item class="el-item" index="/roleRoot">角色权限</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
              			<el-submenu index="14">
							<template slot="title">
							<i class="el-icon-s-order"></i>
							<span>订单管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/paymentIndex">待支付</el-menu-item>
								<el-menu-item class="el-item" index="/sendIndex">待发货</el-menu-item>
								<el-menu-item class="el-item" index="/forIndex">待收货</el-menu-item>
								<el-menu-item class="el-item" index="/completedIndex">已完成</el-menu-item>
								<el-menu-item class="el-item" index="/closedIndex">已关闭</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
              			<el-submenu index="15">
							<template slot="title">
							<i class="el-icon-money"></i>
							<span>提现审批</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/approList">待审批</el-menu-item>
								<el-menu-item class="el-item" index="/approPass">已通过</el-menu-item>
								<el-menu-item class="el-item" index="/approReject">已驳回</el-menu-item>
							</el-menu-item-group>
              			</el-submenu>
              			<el-submenu index="16">
							<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>产品包</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/productList">产品包列表</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
              			<el-submenu index="17">
							<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>卖场</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/marketList">卖场列表</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
              			<el-submenu index="18">
							<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>资讯公告</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/informationList">资讯列表</el-menu-item>
								<el-menu-item class="el-item" index="/noticeList">公告列表</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
              			<el-submenu index="19">
							<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>推荐管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/recommendbusinessList">商家推荐</el-menu-item>
								<el-menu-item class="el-item" index="/recommendShopList">商品推荐</el-menu-item>
								<el-menu-item class="el-item" index="/recommendCaseList">设计案例推荐</el-menu-item>
								<el-menu-item class="el-item" index="/recomCaseListBuild">施工案例推荐</el-menu-item>
								<el-menu-item class="el-item" index="/recomDesginList">设计师推荐</el-menu-item>
								<el-menu-item class="el-item" index="/recomBuildList">施工队推荐</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
              			<el-submenu index="20">
							<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>客服管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" @click="$store.commit('SET_CUSTOME_SHOW',true)">打开客服</el-menu-item>
								<el-menu-item class="el-item" index="/knowledgeList">知识库</el-menu-item>
								<el-menu-item class="el-item" index="/welcomeList">客服入口</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
					 <el-submenu index="28">
						 <template slot="title">
							 <i class="el-icon-shopping-bag-1"></i>
							 <span>房源管理</span>
						 </template>
						 <el-menu-item-group>
							 <el-menu-item class="el-item" index="/houseList">房源列表</el-menu-item>
						 </el-menu-item-group>
					 </el-submenu>
              			<el-submenu index="21">
							<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>小区管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/estateList">小区列表</el-menu-item>
							</el-menu-item-group>
					  	</el-submenu>
						 <el-submenu index="22">
							 <template slot="title">
								 <i class="el-icon-shopping-bag-1"></i>
								 <span>优惠券管理</span>
							 </template>
							 <el-menu-item-group>
								 <el-menu-item class="el-item" index="/couponList">优惠列表</el-menu-item>
								 <el-menu-item class="el-item" index="/lootCoupon">夺宝优惠券</el-menu-item>
							 </el-menu-item-group>
						 </el-submenu>
					 <el-submenu index="26">
						 <template slot="title">
							 <i class="el-icon-shopping-bag-1"></i>
							 <span>活动管理</span>
						 </template>
						 <el-submenu index="26-1">
							 <template slot="title">
								 <i class="el-icon-shopping-bag-1"></i>
								 <span>建档百年</span>
							 </template>
							 <el-menu-item-group>
								 <el-menu-item class="el-item" index="/partyList">节目列表</el-menu-item>
							 </el-menu-item-group>
							 <el-menu-item-group>
								 <el-menu-item class="el-item" index="/likeList">点赞列表</el-menu-item>
							 </el-menu-item-group>
							 <el-menu-item-group>
								 <el-menu-item class="el-item" index="/partyStatics">数据统计</el-menu-item>
							 </el-menu-item-group>
						 </el-submenu>
					 </el-submenu>
					 <el-submenu index="23">
						 <template slot="title">
							 <i class="el-icon-shopping-bag-1"></i>
							 <span>装修攻略</span>
						 </template>
						 <el-menu-item-group>
							 <el-menu-item class="el-item" index="/articleList">文章列表</el-menu-item>
						 </el-menu-item-group>
						 <el-menu-item-group>
							 <el-menu-item class="el-item" index="/articleTypeList">文章分类</el-menu-item>
						 </el-menu-item-group>
					 </el-submenu>
					 <el-submenu index="25">
						 <template slot="title">
							 <i class="el-icon-user"></i>
							 <span>用户管理</span>
						 </template>
						 <el-menu-item-group>
							 <el-menu-item class="el-item" index="/userLevelList">等级列表</el-menu-item>
						 </el-menu-item-group>
						 <el-menu-item-group>
							 <el-menu-item class="el-item" index="/userPointList">积分列表</el-menu-item>
						 </el-menu-item-group>
						 <el-menu-item-group>
						 	 <el-menu-item class="el-item" index="/userList">会员列表</el-menu-item>
						 </el-menu-item-group>
					 </el-submenu>
					 <el-submenu index="24">
						 <template slot="title">
							 <i class="el-icon-shopping-bag-1"></i>
							 <span>财务管理</span>
						 </template>
						 <el-submenu index="24-1">
							<template slot="title">
								 <span>营业订单审核</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/shopSettle">合作商结算订单</el-menu-item>
							</el-menu-item-group>
						 </el-submenu>
						 <el-submenu index="24-2">
							<template slot="title">
								 <span>分销结算</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/makerSettle">创客结算订单</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/guideSettle">导购结算订单</el-menu-item>
							</el-menu-item-group>
						 </el-submenu>
						 <el-submenu index="24-3">
							<template slot="title">
								 <span>提现审批</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/businessApproval">合作商提现审批</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/makerApproval">创客提现审批</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/guideApproval">导购提现审批</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/bankCardManage">提现银行卡管理</el-menu-item>
							</el-menu-item-group>
						 </el-submenu>
						 <el-submenu index="24-4">
							<template slot="title">
								 <span>财务结算</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/manageGeneral">经营总况</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item class="el-item" index="/withdrAndFree">提现手续费结算</el-menu-item>
							</el-menu-item-group>
						 </el-submenu>

					 </el-submenu>
					 <el-submenu index="29">
						<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>直播管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item class="el-item" index="/liveCate">直播分类</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group>
							<el-menu-item class="el-item" index="/liveList">直播列表</el-menu-item>
						</el-menu-item-group>
					 </el-submenu>
					 <el-submenu index="30">
						<template slot="title">
							<i class="el-icon-shopping-bag-1"></i>
							<span>系统配置</span>
						</template>
						<el-menu-item-group>
							<el-menu-item class="el-item" index="/systemSet">系统配置</el-menu-item>
						</el-menu-item-group>
					 </el-submenu> -->
            <el-submenu
              :index="index.toString()"
              v-for="(item, index) in root_router"
              :key="index"
            >
              <template slot="title">
                <i class="el-icon-shopping-bag-1"></i>
                <span>{{ item.name }}</span>
              </template>
              <!-- 还有菜单下一级 -->
              <template v-if="item.checked">
                <div v-for="(item1, index1) in item.child" :key="index1">
                  <!-- 还有菜单下一级 -->
                  <template v-if="item1.type == 'menu'">
                    <el-submenu
                      :index="index + '-' + index1"
                      style="text-align: center; padding: 0"
                    >
                      <template slot="title">
                        <span>{{ item1.name }}</span>
                      </template>
                      <el-menu-item-group
                        v-for="(item2, index2) in item1.child"
                        :key="index2"
                      >
                        <el-menu-item class="el-item" :index="item2.route">{{
                          item2.name
                        }}</el-menu-item>
                      </el-menu-item-group>
                    </el-submenu>
                  </template>
                  <!-- 单个页面 -->
                  <template v-else>
                    <el-menu-item-group>
                      <el-menu-item class="el-item" :index="item1.route">{{
                        item1.name
                      }}</el-menu-item>
                    </el-menu-item-group>
                  </template>
                </div>
              </template>
              <!-- 单个页面 -->
              <template v-else>
                <el-menu-item-group
                  v-for="(item3, index3) in item.child"
                  :key="index3"
                >
                  <template v-if="item3.name == '打开客服'">
                    <el-menu-item
                      class="el-item"
                      @click="$store.commit('SET_CUSTOME_SHOW', true)"
                      >{{ item3.name }}</el-menu-item
                    >
                  </template>
                  <template v-else>
                    <el-menu-item class="el-item" :index="item3.route">{{
                      item3.name
                    }}</el-menu-item>
                  </template>
                </el-menu-item-group>
              </template>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      root_router: [],
      userName: localStorage.getItem("UserName"),
    };
  },
  mounted() {
    let allRoute = JSON.parse(this.$store.state.root_router);
    // console.log(allRoute, "1111");
    allRoute.map((item) => {
      // console.log(item);
      item.checked = false;
      if (item.child && item.child.length) {
        item.child.map((item1) => {
          if (item1.child && item1.child.length) {
            item.checked = true;
          }
        });
      }
    });
    this.root_router = allRoute;
    // console.log(this.root_router, "00000");
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 退出登录
    downLogin() {
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      localStorage.removeItem("UserName");
      localStorage.clear();
      this.$message({
        showClose: true,
        message: "未登录，请先登录",
        type: "error",
      });
      this.$router.push({ path: "/login" });
    },

    // 获取菜单目录列表
    getMenuList() {
      let user_id = localStorage.getItem("user_id");
    },
  },
};
</script>

<style lang="less" scoped>
@import "index.less";
</style>